/**
 * Created by James on 2016/12/21.
 */
(function ($) {
    var _ajax = $.ajax;             // 备份jquery的ajax方法

    $.ajax = function (opt) {       // 重写jquery的ajax方法
        var fn = {
            error: function (xmlHttpRequest, textStatus, errorThrown) {},
            success: function(data, textStatus){}
        };
        if(opt.error){
            fn.error = opt.error;
        }
        if(opt.success){
            fn.success = opt.success;
        }

        /**
         * 在调用ajax时,可以添加一个ele的变量, 值为字符串(jQuery选择符, 最好是id选择符), 例如:
         *
         * $(document).ready(function () {
                $.ajax({
                    ele: "#demo",
                    url: "http://10.129.4.146:8000/odin/inventory_target_interface/",
                    cache: false,
                    type: 'get',
                    dataType: 'json',
                    success: function (ret) {
                        console.log(ret);
                    },
                });
            })
         *
         * 在上面的例子, 添加了一个ele, 值为'#demo'.当ajax请求时, 将会发生以下动作:
         *  1. 请求前, 将会调用beforeSend函数, 并在#demo元素下新增一个p.js-ajax-before的元素, 元素内容为: "正在加载,请稍后..."(内容可自定义)
         *  2. 请求完成后, 移除#demo元素下的p.ajax-mark元素.
         *  3. 若请求出错, 输出出错信息(新增一个p.js-ajax-error元素, 但不会移除);
         * **/
        var _opt = $.extend(opt, {
            cache: false,
            type: 'get',
            dataType: 'json',
            error: function(xmlHttpRequest, textStatus, errorThrown){
                /** 请求出错的回调函数 **/
                if(this.ele){
                    $(this.ele).append('<div class="js-ajax-error" style="color: #f00;">Error fetching data!</div>');
                }
                //console.error('%c error .....', "color: #f00; font-size: 30px;");       //输出带样式的文字
                fn.error(xmlHttpRequest, textStatus, errorThrown);
            },
            success: function (data, textStatus) {
                /** 请求成功的回调函数 **/
                //console.log('%c success .....', "color: #0071ff;");
                this.status = true;
                fn.success(data, textStatus);
            },
            beforeSend: function (xhr) {
                /** 提交前的回调函数 **/
                this.status = false;        //用于记录ajax请求的状态
                if(this.ele){
                    $(this.ele).append('<div class="js-ajax-before">Please wait while data is being requested ... </div>');
                }
                //console.warn('beforeSend .....');
            },
            complete: function (xhr, ts) {
                /** 请求完成后的回调函数 (请求成功或失败之后调用) **/
                if(this.ele){
                    $(this.ele).find("div.js-ajax-before").remove();
                }
                if(this.ele && this.status){
                    $(this.ele).find("div.js-ajax-error").remove();
                }
            }
        });
        return _ajax(_opt);
    }
})(jQuery);